var agr = agr || {};

/** @constructor */
agr.DetailPage = function($page) {
    'use strict';
    $page.find('div[data-role="header"]').detach();

    $page.prepend(
        '<div data-role="header">' +
        '<a id="aLeft" data-role="button" data-icon="back">Back</a>' +
        '<h1 id="hTitle"></h1>' +
        '<a id="aRight" data-role="button" data-icon="gear">Edit</a>' +
        '</div>');

    var header = new agr.Header(
        $page.find('#aLeft'),
        $page.find('#hTitle'),
        $page.find('#aRight'));

    var $content = $page.find('div[data-role="content"]');
    // will need to add more types
    var $textinput = $content.find('input[type="text"], input[type="date"], input[type="number"], textarea');
    var $checkboxradio = $content.find('input[type="checkbox"]');
    var $selectmenu = $content.find('select');
    var $inputButton = $content.find('input[type="button"]');

    /**
     * sets controls enabled or disabled
     */
    var localSetEdit = function(bool) {
        if (bool) {
            header.showDone();
        } else {
            header.showEdit();
        }

        var ctrlState = (bool) ? 'enable' : 'disable' ;

        $textinput.textinput(ctrlState);
        $selectmenu.selectmenu(ctrlState);
        $checkboxradio.checkboxradio(ctrlState);
        $inputButton.button(ctrlState);
    }

    this.setEdit = localSetEdit;

    /**
     * populate controls from db object
     */
    function setValues(o) {
        $.each(o, function(k, v) {
            var $E = $content.find('#'+k);

            $E.filter('select').val(v).selectmenu('refresh');
			
		    $E.filter('input[type="hidden"]').val(v).change();

            $E.filter('input[type="text"]').val(v);

            $E.filter('input[type="date"]').val(v);

            $E.filter('input[type="number"]').val(v);

            $E.filter('textarea').val(v);

            $E.filter('input[type="checkbox"]')
                .prop('checked',v).checkboxradio('refresh');

        });
    }

    /**
     * returns values from UI, from keys in db object
     * @return {Object} UI key/value
     */
    function getValues() {
        var retval = {};
        
        $content.find('.rw').each(function(i,E) {
            if (E.id === 'ID') return;
            if (E.type === 'checkbox') {
            	retval[E.id] = 
                    (E.checked) ? 1 : 0;
            }
            else{
            	retval[E.id] = $(this).val();
        	}
        });

        return retval;
    }

    /**
     * required for objects that have a GenotypeID
     * @param {Array[Genotype]} gts
     */
    this.setGenotypes = function(gts) {
        var $gt = $content.find('select#GenotypeID');

       $gt.children().detach();

        var i, html = '<option value="">None</option>';

        for (i = 0; i < gts.length; i++) {
            html += '<option value="' +
                gts[i].ID + '">' +
                gts[i].Name + '</option>';
        }

        $gt.html(html);
    }

    /**
     * @param {Object} ctrl_obj database object
     * @param {Function} ctrl_back callback on cancel/back
     * @param {Function(Object)} ctrl_done callback on done
     */
    this.setControl = function(row, ctrl_back, ctrl_done) {
        localSetEdit(!row.ID);

        setValues(row);

        header.clickLeft(function() {
            if (header.leftCancel()) {
                if (!row.ID) {
                    ctrl_back();
                } else {
                    setValues(row);
                    localSetEdit(false);
                }
            } else {
                ctrl_back();
            }
        });

        header.clickRight(function() {
            if (header.rightDone()) {
                ctrl_done(getValues());
            } else {
                localSetEdit(true);
            }
        });
    }
}
